<!--影响目标-->
<template>
  <div class="influence-container">
    <div class="detail-card-area">
      <div class="card-title">
        <h3>影响资产类型占比</h3>
      </div>
      <div class="content-area" v-loading="chartLoading">
        <Empty v-if="!chartLoading && !chartData.length"></Empty>
        <div class="event-chart" ref="pieChart" v-else></div>
      </div>

    </div>
    <div class="detail-card-area">
      <div class="card-title">
        <h3>影响目标TOP5</h3>
        <ul class="switch-box">
          <li :class="switchActiveVal===1?'active':''" @click.stop="switchActiveClick(1)">目标资产</li>
          <li :class="switchActiveVal===2?'active':''" @click.stop="switchActiveClick(2)">IP地址</li>
        </ul>
      </div>
      <div class="content-area" v-loading="rankLoading">
        <Empty v-if="!rankLoading && !rankData.length"></Empty>
        <div class="ranking-area" v-else>
          <ul class="ranking-content">
            <li v-for="(item, index) in rankData" :key="index" class="ranking-item" :class="`_${index + 1}`">
              <div class="info">
                <div class="name">
                  <i class="icon"></i>
                  <span>{{ item.name }}</span>
                </div>
                <div class="percent">
                  <span>{{ item.value }}</span>
                  <span> ∣ </span>
                  <span>{{ item.percent }}%</span>
                </div>
              </div>
              <div class="outer">
                <div class="inner" :style="{ width: `${item.percent}%` }"></div>
              </div>
            </li>
          </ul>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {numConvert} from '@/utils/pe_util.js'
import {orderBy, cloneDeep} from "lodash";
import Empty from '@/components/Empty.vue';

const mockPieData = [
  {
    "victim_industry": "公共管理、社会保障和社会组织",
    "victim_event_cnt": 1
  },
  {
    "victim_industry": "民政局",
    "victim_event_cnt": 3
  },
  {
    "victim_industry": "其他",
    "victim_event_cnt": 6
  }
];
const mockOrgDat = [
  {
    "relationOrganizationName": "宁夏大地环保有限公司",
    "eventCnt": 12,
  },
  {
    "relationOrganizationName": "河北银行",
    "eventCnt": 13
  },
  {
    "relationOrganizationName": "中国银行",
    "eventCnt": 9
  },
  {
    "relationOrganizationName": "工商银行",
    "eventCnt": 22
  },
  {
    "relationOrganizationName": "招商银行",
    "eventCnt": 30
  },
  {
    "relationOrganizationName": "建设银行",
    "eventCnt": 2
  }
];
const mockIpData = [
  {
    "affectIp": "122.215.198.15",
    "location": "宁夏-吴忠市",
    "eventCnt": 6
  },
  {
    "affectIp": "122.215.198.14",
    "location": "宁夏-吴忠市",
    "eventCnt": 2
  },
  {
    "affectIp": "121.215.198.13",
    "location": "宁夏-吴忠市",
    "eventCnt": 2
  },
  {
    "affectIp": "121.215.198.12",
    "location": "宁夏-吴忠市",
    "eventCnt": 2
  }
];
export default {
  name: "InfluenceChart",
  components: {Empty},
  props: {
    viewName: {
      type: String,
      required: true,
    },
    viewType: {
      type: Number,
      required: true,
    },
    datePickerValue: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data() {
    return {
      chartLoading: true,
      rankLoading: true,
      chartData: [],
      // 切换选项
      switchActiveVal: 1,
      rankData: [],
    }
  },
  created() {
    this.initComp();
  },
  methods: {
    initComp() {
      console.log('影响目标组件获取数据了------', this.datePickerValue);
      this.getPieData();
      this.getRankData();
    },
    getPieData() {
      new Promise((resolve) => {
        setTimeout(()=>{
          resolve(true)
        }, 1000)
      }).then(() => {
        this.chartData = mockPieData;
        this.formatPieData(mockPieData)
      })
    },
    formatPieData(data) {
      const SData = [];
      for (const item of data) {
        SData.push({
          name: item.victim_industry,
          value: item.victim_event_cnt + Math.floor(Math.random() * 20)
        });
      }
      this.initPieChart(SData, data)
    },
    initPieChart(SData) {
      const getPercent = function (i, total) {
        return `${((i / total) * 100).toFixed(2)}%`
      }
      const color = ['#6456D1', '#436BD9', '#F59E3B', '#EB5F5E', '#348FEA', '#0BC4B6'];
      const total = SData.reduce((t, cur) => t += cur.value, 0);
      const option = {
        backgroundColor: 'transparent',
        legend: {
          type: 'scroll',
          right: '2%',
          top: 'center',
          orient: 'vertical',
          itemWidth: 16,
          itemHeight: 6,
          itemGap: 24,
          textStyle: {
            color: '#3F405D',
            rich: {
              value: {
                width: 100,
                overflow: 'truncate',
                color: '#3f405d',
                fontSize: 16,
                fontWeight: 'bold',
                lineHeight: 14,
              },
              name: {
                width: 100,
                overflow: 'truncate',
                color: '#808191',
                fontSize: 16,
                lineHeight: 14,
              },
              percentGreen: {
                color: '#0BC4B6',
                fontSize: 16,
              },
              percentRed: {
                color: '#EB5F5E'
              },
            },
          },
          formatter: function (name) {
            let find = SData.find(el => el.name === name);
            let dealName = name.length > 5 ? name.substr(0, 5) + '...' : name
            return [
              '{name|' + dealName + '}',
              '{value|' + numConvert(find.value) + '}',
              '{percentGreen|' + getPercent(find.value, total) + '}'
            ].join(' ');
          },
          tooltip: {
            show: true
          }
        },
        color: color,
        tooltip: {
          show: true
        },
        series: [{
          type: 'pie',
          radius: ['47%', '68%'],
          center: ['25%', '50%'],
          hoverAnimation: true,
          z: 10,
          itemStyle: {
            // 间隙
            normal: {
              borderWidth: SData.length > 1 ? 3 : 0,
              borderColor: '#fff'
            }
          },
          label: {
            normal: {
              show: true,
              position: 'center',
              color:'#4c4a4a',
              formatter: '{total|' + total +'}'+ '\n\r' + '{active|总计}',
              rich: {
                total:{
                  fontSize: 35,
                  fontFamily : "微软雅黑",
                  color:'#454c5c'
                },
                active: {
                  fontFamily : "微软雅黑",
                  fontSize: 16,
                  color:'#6c7a89',
                  lineHeight:30,
                },
              }
            },
          },
          labelLine: {
            show: false
          },

          data: SData,

        }]
      };
      let chart = this.$echarts.init(this.$refs.pieChart);
      chart.setOption(option, true);
      chart.resize(true);
      this.chartLoading = false;
    },
    getRankData() {
      this.rankData.length = 0;
      new Promise((resolve) => {
        setTimeout(() => {
          this.switchActiveVal === 1 ? resolve(cloneDeep(mockOrgDat)) : resolve(cloneDeep(mockIpData));
        }, 1000);
      }).then((data) => {
        let result = [];
        if (data.length > 5) {
          result = data.splice(0, 5);
        } else {
          result = data;
        }
        this.switchActiveVal === 1 ? this.formatOrgData(result) : this.formatIpData(result);
      })
    },
    formatOrgData(data) {
      const total = (data || []).reduce((a, b) => {
        return a + b.eventCnt;
      }, 0);
      for (const item of orderBy(data, ['eventCnt'], ['desc'])) {
        this.rankData.push({
          name: item.relationOrganizationName,
          value: item.eventCnt,
          percent: ((item.eventCnt / (total || 1)) * 100).toFixed(0),
        });
      }
      this.rankLoading = false;
    },
    formatIpData(data) {
      const total = (data || []).reduce((a, b) => {
        return a + b.eventCnt;
      }, 0);
      for (const item of orderBy(data, ['eventCnt'], ['desc'])) {
        this.rankData.push({
          name: item.affectIp,
          value: item.eventCnt,
          percent: ((item.eventCnt / (total || 1)) * 100).toFixed(0),
        });
      }
      this.rankLoading = false;
    },
    switchActiveClick(val) {
      if (val === this.switchActiveVal) {
        return null;
      }
      this.rankLoading = true;
      this.switchActiveVal = val;
      this.getRankData();
    }
  }
}
</script>

<style scoped lang="scss">
.influence-container {
  width: 100%;
  display: flex;

  .detail-card-area {
    flex: 1;
    height: 400px;
    border: 1px solid #ccc;
    border-radius: 10px;

    .card-title {
      width: 100%;
      height: 45px;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;

      > h3 {
        font-size: 16px;
        font-weight: bold;
      }

      .switch-box {
        display: flex;
        cursor: pointer;
        font-size: 14px;

        > li:first-of-type {
          margin-right: 10px;
        }

        .active {
          color: #436bd9;
          font-weight: bold;
        }
      }
    }

    &:first-of-type {
      margin-right: 24px;
    }
  }

  .content-area {
    width: 100%;
    height: 353px;
    padding: 0 15px 15px 15px;

    .event-chart {
      width: inherit;
      height: 333px;
    }
  }

  .ranking-area {
    width: 100%;
    height: inherit;
    font-size: 15px;
    overflow-y: auto;
    padding: 20px 10px 20px 10px;

    .ranking-item {
      margin-bottom: 20px;

      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;

        .name {
          display: flex;
          align-items: center;
          color: #686868;

          .icon {
            width: 5px;
            height: 5px;
            border-radius: 100%;
            background: #436bd9;
            margin-right: 7px;
          }
        }

        .percent {
          padding: 2px 8px;
          background: rgba(67, 107, 217, 0.2);
          border-radius: 3px;
          color: #436bd9;
        }
      }

      .outer {
        margin-top: 3px;
        width: 100%;
        height: 12px;
        border-radius: 5px;
        background: #e1e3ed;

        .inner {
          background: #436bd9;
          height: inherit;
          border-radius: 5px;
        }
      }

      &._1 {
        .name {
          .icon {
            background: rgb(235, 95, 94);
          }
        }

        .percent {
          background: rgba(235, 95, 94, 0.2);
          color: rgb(235, 95, 94);
        }

        .inner {
          background: rgb(235, 95, 94);
        }
      }

      &._2 {
        .name {
          .icon {
            background: rgb(252, 127, 84)
          }
        }

        .percent {
          background: rgba(252, 127, 84, 0.2);
          color: rgb(252, 127, 84);
        }

        .inner {
          background: rgb(252, 127, 84);
        }
      }

      &._3 {
        .name {
          .icon {
            background: rgb(245, 158, 59);
          }
        }

        .percent {
          background: rgba(245, 158, 59, 0.2);
          color: rgb(245, 158, 59);
        }

        .inner {
          background: rgb(245, 158, 59);
        }
      }
    }
  }
}
</style>